<template>
<el-dialog class="check-copy-dialog" :append-to-body="true" :title="expCopyList.title" :visible.sync="expCopyList.show" width="1000px" :close-on-click-modal="false">
    <el-table v-loading="loading" :data="tableData" tooltip-effect="dark" height="400px">
        <template slot="empty">
            <no-data :types="false">
                <span>暂无数据</span>
            </no-data>
        </template>
        <el-table-column prop="experimentName" label="名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createOper" label="创建人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" v-preventReClick="2000" @click="handleOpen(scope.row)">打开</el-button>
                <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</el-dialog>
</template>

<script>
import NoData from '@/components/NoData'
import { mapGetters, mapMutations } from 'vuex'
export default {
    name: 'CheckCopy',
    props: {
        expCopyList: {
            type: Object
        }
    },
    components: { NoData },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId',
            experimentId: 'common/getExperimentId',
            typeId: 'common/getTypeId',
            currentExpInfo: 'common/getCurrentExpInfo'
        })
    },
    data () {
        return {
            tableData: [],
            loading: false
        }
    },
    created () {
        this.init()
    },
    methods: {
        ...mapMutations({
            setTypeId: 'common/setTypeId',
            setNewExp: 'common/setNewExp'
        }),
        init () {
            this.loading = true
            const params = {
                experimentId: this.experimentId,
                projectId: this.projectId,
                pageSize: -1
            }
            this.$post('/experiment/querySnapshots', params).then(res => {
                if (res) {
                    this.tableData = res.rows
                }
            }).finally(() => {
                this.loading = false
            })
        },
        // 新增并打开
        handleOpen (item) {
            let {
                experimentName,
                description,
                snapshotId
            } = item
            const params = {
                projectId: this.projectId,
                experimentName,
                description,
                snapshotId,
                catalogId: this.currentExpInfo.catalogId
            }
            this.$post('/experiment/createBySnapshot', params).then(res => {
                if (res) {
                    this.typeId !== 0 && this.setTypeId(0)
                    this.expCopyList.show = false
                    setTimeout(() => {
                        this.setNewExp(res.experimentId)
                    }, 500)
                }
            })
        },
        handleRemove (item) {
            this.$confirm(`确定要删除实验副本<span'>[${item.experimentName}]</span>吗？`, '提示', {
                confirmButtonText: '确 定',
                cancelButtonText: '取 消',
                dangerouslyUseHTMLString: true,
                type: 'warning'
            }).then(() => {
                const params = {
                    projectId: this.projectId,
                    snapshotId: item.snapshotId
                }
                this.$post('/experiment/deleteSnapshot', params).then(res => {
                    if (res) {
                        this.$message.success('删除成功')
                        this.init()
                    }
                })
            }).catch(() => {})
        }
    }
}
</script>
<style lang="less">
    .check-copy-dialog {
        .el-table__header th {
            background: #f5f5f5;
        }
    }
</style>
